<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->

    <div class="bottom_center">
      <p>您的会员已到期，先充值享5折优惠</p>
      <p>立即充值</p>
    </div>
    <div class="bottom_main">
      <div class="bottom_main_top">
        <p @click="shun"><span class="iconfont icon-caidan"></span> 顺序播放</p>
        <p @click="dao"><span class="iconfont icon-xialacaidan1"></span>倒序</p>
      </div>
      <div class="bottom_main_list">
        <ul style="padding-bottom: 3.85rem">
          <li class="cataItem" v-for="(item, index) in bottomData" :key="index">
            <div
              :class="
                $store.state.bags.musici == item.diversityname
                  ? 'ones'
                  : 'cataItemcont'
              "
            >
              <div>{{ item.diversityname }}.</div>
              <p>
                {{ item.diversitynametext }}
              </p>
              <div
                class="iconfont icon-zhengzaibofang1"
                v-if="$store.state.bags.musici == item.diversityname"
              ></div>
            </div>
            <div>
              <img
                src="../../../static/img/v2_qskq3k.png"
                @click="downloads(item,index)"
              />
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      bottomData: [],
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.bottomData = this.$store.state.bags.bookCatalog;
  },
  // Vue方法定义
  methods: {
    dao() {
      this.bottomData = [...this.$store.state.bags.bookCatalog].sort((a, b) => {
        return b.diversityname - a.diversityname;
      });
    },
    shun() {
      this.bottomData = [...this.$store.state.bags.bookCatalog].sort((a, b) => {
        return a.diversityname - b.diversityname;
      });
    },
    downloads(item,index) {
      //userid bookid type 集数 diversity
      let urls =
        this.$store.state.bags.bookCatalog[this.$store.state.bags.musicIndex]
          .book_text_url;
      this.$store
        .dispatch("bags/downloads", urls.split("static")[1])
        .then((data) => {
          var blob = new Blob([data], {
            type: "application/force-download;charset=utf-8",
          });
          var url = window.URL.createObjectURL(blob);
          var aLink = document.createElement("a");
          aLink.style.display = "none";
          aLink.download = decodeURI("fileName.mp3");
          aLink.href = url;
          console.log(url);
          document.body.appendChild(aLink);
          aLink.click();
          document.body.removeChild(aLink); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        });
        console.log(item)
        this.$store.dispatch("bags/getdownload",{bookid:item.bookid,type:'add',userid:sessionStorage.getItem('userId'),diversity:index+1,diversityid:item.diversityid})
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.bottom_top {
  width: 100%;
  height: 60px;
}
.bottom_center {
  width: 100%;
  height: 35px;
  line-height: 35px;
  color: orange;
  border-top: 1px solid #cccc;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 0 20px 30px rgb(250, 248, 248);
  padding: 0 15px;
}
.bottom_center p:nth-child(2) {
  width: 60px;
  height: 25px;
  line-height: 25px;
  border: 1px solid orange;
  border-radius: 5px;
  text-align: center;
  margin-top: 5px;
}
.bottom_main_top {
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
}
.bottom_main_top span {
  font-size: 16px;
  line-height: 35px;
}
.bottom_main_top p {
  font-size: 12px;
  padding: 0 5px;
}
.cataItem {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
}
.cataItemcont {
  display: flex;
  justify-content: space-around;
}
.cataItemcont p {
  font-size: 16px;
  color: black;
  font-weight: 400;
}
.ones {
  display: flex;

  justify-content: space-around;
}
.ones p {
  font-size: 16px;
  color: rgb(212, 90, 90);
  font-weight: 400;
}
.ones div {
  color: rgb(212, 90, 90);
}
</style>
<style>
.topliang {
  font-weight: bold;
  font-size: 18px;
}
.bottom_top .van-tabs {
  background: white;
}
.bottom_top .van-tab__text--ellipsis {
  color: black;
  font-size: 14px;
}
.van-tabs__line {
  position: absolute;
  bottom: 15px;
  left: 0;
  z-index: 1;
  width: 25px;
  height: 3px;
  background-color: black;
  border-radius: 3px;
}
.van-tab--active {
  color: #323233;
  font-weight: bold;
}
</style>